<%--
  Created by IntelliJ IDEA.
  User: 檬zhu
  Date: 2021/12/19
  Time: 14:56
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8" %>
<html>
<head>
    <title>手机-验证码登录</title>
    <link rel="icon" href="${pageContext.request.contextPath}/resources/images/index.jpg" type="image/x-icon"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/resources/css/index.css"/>
    <!-- 引入 layui.css -->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/resources/layui/css/layui.css">
    <!-- 引入 layui.js -->
    <script src="${pageContext.request.contextPath}/resources/layui/layui.js"></script>
    <SCRIPT src="${pageContext.request.contextPath}/resources/js/jquery-1.9.1.min.js" type="text/javascript"></SCRIPT>
</head>
<body>
<%
    Object object = request.getAttribute("unregistered");
    if (object != null) {
        out.println("<script language='JavaScript'>alert('手机号尚未注册');window.location.href='/SMSLogin'</script>");
        return;
    }
    Object obj = request.getAttribute("verifyCodeError");
    if (obj != null) {
        out.println("<script language='JavaScript'>alert('验证码错误');window.location.href='/SMSLogin'</script>");
        return;
    }

%>
<DIV class="top_div size" style="color: #FFFFFF;">
    <div style="float: left;height: 330px">
        <img src="../resources/images/order.png" width="500px" height="350px">
    </div>
    <br>
    <p style="margin-right: 550px; font-size: 60px">网上订餐系统</p>
    <p style="float: right;font-size: 30px; margin-top: 100px">─────Web开发技术课程设计</p>
</DIV>
<iframe name="sendSMS" style="display:none;">
</iframe>
<div class="bot_div">
    <div style="background-color: #FFFFFF; float: left; width: 800px; height: 350px; margin-left: 50px; margin-top: 20px">
        <p class="size">Welcome to</p>
        <p class="size">order.com</p>
        <p style="font-size: 15px" class="size">or login with</p>
        <p style="text-align: center; margin-top: 12px">
            <span style="font-family: Impact, Haettenschweiler, ‘Arial Narrow Bold’, sans-serif;" class="b_size">f</span>
            <span><i class="layui-icon layui-icon-location b_size"></i></span>
            <span><i class="layui-icon layui-icon-share b_size"></i></span>
        </p>
    </div>
    <form style="background: rgb(255, 255, 255); margin: 50px 10px 10px 950px; border-image: none; width: 400px; height: 250px; text-align: center;"
          name="mobileform" action="/tel_loginCheck">
        <P style="padding: 30px 0 10px; position: relative;"><SPAN class="t_logo" style="top: 27px;">
        <i class="layui-icon layui-icon-cellphone" style="font-size: 25px; margin-left: 10px"></i></SPAN>
            <INPUT class="ipt" type="text" id="tel" name="tel" placeholder="请输入手机号" value="">
        </P>

        <P style="position: relative;"><SPAN class="v_logo" style="top: -3px;">
        <i class="layui-icon layui-icon-auz" style="font-size: 25px; margin-left: 10px"></i></SPAN>
            <input class="verify" type="text" name="verifyCode" id="verifyCode" placeholder="验证码" value="">
            <input class="verify2" type="button" id="btn"
                   style="background: #99CCFF;border: 1px solid rgb(26, 117, 152); border-image: none;font-weight: bold;"
                   value="点击获取验证码"/>
        </P>
        <P style="position: relative;"><SPAN class="i_logo">
        <i class="layui-icon layui-icon-group" style="font-size: 15px; margin-left: 10px"></i></SPAN>
        <div style="margin-top: 15px">
            <label><input type="radio" name="identity" value="顾客" checked="checked">顾客</label>
            <label><input type="radio" name="identity" value="商家" style="margin-left: 5%">商家</label>
        </div>

        <DIV style="height: 50px; line-height: 50px; margin-top: 30px; ">
            <P style="margin: 0 35px 20px 45px;">
            <SPAN>
              <input type="submit"
                     style="margin-top:20px;width:290px;background: #0099CC; padding:7px 10px; border-radius: 4px; border: 1px solid rgb(26, 117, 152); border-image: none; color: rgb(255, 255, 255); font-weight: bold;"
                     value="登录"/>
                <br>
           </SPAN>
                <A style="color: #0099CC;" href="/">账号-密码登录</A>
            </P></DIV>
    </form>
</div>
<script type="text/javascript">

    function test(o) {
        const tel = document.getElementById("tel").value;
        if (!(/^1[3|5|7|8][0-9]\d{4,8}$/.test(tel))) {
            alert("手机号格式不正确");
            document.mobileform.tel.focus();
            return false;
        }
        sendSMS();
        time(o)
    }

    let wait = 60;
    function time(o) {

        if (wait === 0) {
            o.removeAttribute("disabled");
            o.value = "点击获取验证码";
            wait = 60;
        } else {
            o.setAttribute("disabled", true);
            o.value = "重新发送(" + wait + ")s";
            wait--;
            setTimeout(function () {
                    time(o)
                },
                1000)
        }
    }

    function sendSMS() {
        const tmp = document.createElement("form");
        tmp.target = "sendSMS"
        const tel = document.getElementById("tel").value;
        console.log(tel)
        tmp.action = "http://localhost:8080/sendSMS?tel=" + tel;
        tmp.method = "post";
        document.body.appendChild(tmp);
        tmp.submit();
        return tmp;
    }

    document.getElementById("btn").onclick = function () {
        test(this);
    }
</script>
</body>
</html>
